<template>
  <div class="tabs">
    <el-tabs class="el-tabs" v-model="activeName" :tab-position="tabPosition" @tab-click="handleClick">
      <el-tab-pane label="发现" name="first">
        <find></find>
      </el-tab-pane>
      <el-tab-pane label="书架" name="second">书架</el-tab-pane>
      <el-tab-pane label="想法" name="third">想法</el-tab-pane>
      <el-tab-pane label="我" name="fourth">我</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Find from './find/Find'
export default {
  name: 'Find',
  data () {
    return {
      activeName: 'first',
      tabPosition: 'bottom',
      addable: true
    }
  },
  components: {
    Find
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .el-tabs >>> .el-tabs__nav
    width: 100%
    z-index: 0
  .el-tabs >>> .el-tabs__nav  .el-tabs__item
    width: 25%
  .tabs 
    .el-tabs__header
      position: fixed
      bottom: 0
      right: 0
      left: 0
</style>
